<template>
  <!-- 正常维护工单，试验工单, 计划检修 -->
  <div class="normalMaintenance flowCloumn h100">
    <div class="constentmain h100">
      <div class="tableContent">
        <listTableNew v-bind="tableSetting" ref="klTable"></listTableNew>
      </div>
      <div class="annotations list-table-main" v-if="showType != 'dialogQuery'">
        注：
        <span class="circle normal-bg"></span>
        按期的工单
        <span class="circle remind-bg"></span>
        即将到期的工单
        <span class="circle warning-bg"></span>
        已超期的工单
        <span class="circle gray-bg"></span>
        已废弃工单
      </div>
    </div>
  </div>
</template>
<script>
/* 正常维护工单 */
import {
  getListApi, //列表
} from "@/api/orderManagement/normalMaintenance";
/* 试验工单 */
import {
  getListApi as getExperimentListApi, //列表
} from "@/api/orderManagement/experimentOrder";
/* 计划检修 */
import {
  getListApi as getRepairListApi, //列表
} from "@/api/orderManagement/planRepair";
export default {
  components: {},
  props: {
    showType: {
      type: String,
      default: "",
    },
    ordeType: {
      type: String,
      default: "",
    },
    //设备台账当前设备
    currentNode: {
      type: Object,
      default: () => {
        return {};
      },
    },
    planId: {
      type: String,
      default: "",
    },
    isEquipment: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      userInfo: this.$store.getters.userInfo,
      pageType: "list",
      formData: {},
      currentDevice: {},
      tableSetting: {
        // selectionShow: true,
        showCustomBtn: true, //是否显示自定义列按钮
        showFilterBtn: true, //是否显示过滤器按钮
        pageConfig: {
          pageCode: this.$route.name, //页面标识，用来存储过滤器以及自定义列的时候用
          userId: this.$store.getters.userInfo.id,
        },
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [
            {
              type: "input",
              label: "标题",
              model: "title",
            },
            {
              label: "状态",
              model: "statusList",
              type: "select",
              multiple: true,
              option: this.$store.getters["dirtData"]("order_maintain_status"),
            },
            {
              type: "input",
              label: "工单编号",
              model: "code",
            },
          ],
        },
        actionList: [],
        column: [
          {
            label: "状态",
            prop: "status",
            scopeType: "formate",
            method: (row) => {
              let dom = "";
              let statusName =
                this.$store.getters["fineDirtDataName"](
                  "order_all_status",
                  row.status
                ) || row.status;
              let colorStatus = row.trafficLight;
              if (row.status == "DEPRECATED") {
                dom =
                  '<span class="gray" title="废弃工单">' +
                  statusName +
                  "</span>";
              } else {
                if (colorStatus == "Normal") {
                  //正常
                  dom =
                    '<span class="normal" title="按期的工单">' +
                    statusName +
                    "</span>";
                } else if (colorStatus == "Warn") {
                  //即将到期
                  dom =
                    '<span class="remind" title="即将到期的工单">' +
                    statusName +
                    "</span>";
                } else if (colorStatus == "OverTime") {
                  //超期
                  dom =
                    '<span class="warning" title="已超期工单">' +
                    statusName +
                    "</span>";
                }
              }
              return dom;
            },
            sortable: "custom",
            width: "80px",
          },
          {
            label: "编号",
            prop: "code",
            sortable: "custom",
            width: "220px",
          },
          {
            label: "标题",
            prop: "title",
            sortable: "custom",
            showTooltip: true,
            width: "220px",
          },
          {
            label: "设备管理单位",
            id: "deptManage",
            prop: "deptManageName",
            sortable: "custom",
            width: "240px",
          },
          {
            label: "设备",
            prop: "orderEquipPoList",
            sortable: "custom",
            scopeType: "formate",
            method: (row) => {
              let name = [];
              if (row.needStatus == 1) {
                switch (this.ordeType) {
                  case "repair":
                    name = row.repairEquipmentPos.map((item) => {
                      return item.equipmentName;
                    });
                    break;
                  case "experiment":
                    name = row.experimentEquipmentPos.map((item) => {
                      return item.equipmentName;
                    });
                    break;
                  default:
                    name = row.maintainEquipmentPos.map((item) => {
                      return item.equipmentName;
                    });
                    break;
                }
              } else {
                name = row.orderEquipPoList
                  ? row.orderEquipPoList.map((item) => {
                      return item.equipmentName;
                    })
                  : [];
              }
              return name.toString();
            },
            width: "240px",
          },
          {
            label: "作业单位",
            prop: "workDeptPoList",
            //sortable: "custom",
            scopeType: "formate",
            method: (row) => {
              let worklist = row.workDeptPoList || [];
              let name = [];
              if (worklist.length > 0) {
                worklist.map((i) => {
                  name.push(i.workDeptName);
                });
              }
              return name.toString();
            },
            // showTooltip: true,
            width: "240px",
          },
          {
            label: "计划开始时间",
            prop: "startTime",
            sortable: "custom",
          },
          {
            label: "计划结束时间",
            prop: "endTime",
            sortable: "custom",
          },       
        ],
        //表格方法
        tableMethods: {
          //点击行的方法
          rowClick: (val) => {
            if (this.showType != "dialogQuery") {
              this.gotoDetails(val);
            }
          },
        },
      },
    };
  },
  watch: {
  },
  computed: {
  },
  created() {
    if (this.planId != "") {
      // this.tableSetting.showCustomBtn = false;
      // this.tableSetting.showFilterBtn = false;
      let queryData = Object.assign(this.tableSetting.searchObj.queryData, {
        planId: this.planId,
      });
      this.tableSetting.searchObj.queryData = queryData;
    }
    /* 添加监听事件 */
    window.addEventListener("storage", this.updateData);
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.updateData);
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {   
          this.updateData();
    },
    updateData() {
      this.$refs.klTable.searchData();
    },
    getTableData(params, sortStr) {
      let form = { ...params };
      if (sortStr) {
        form.orders = sortStr;
      }
      var actionApi = null;
      if (this.menuType == "maintain" || this.ordeType == "maintain") {
        /* 正常维护单 */
        actionApi = getListApi;
      } else if (
        this.menuType == "experiment" ||
        this.ordeType == "experiment"
      ) {
        /* 试验工单 */
        actionApi = getExperimentListApi;
      } else if (this.menuType == "repair" || this.ordeType == "repair") {
        /* 计划检修 */
        actionApi = getRepairListApi;
      }
      actionApi(form)
        .then((res) => {
          let data = res.data.list || [];
          let total = res.data.total || 0;
          this.$set(this.tableSetting, "tableData", data);
          this.$set(this.tableSetting, "totalNumber", total);
        })
        .catch((e) => {
          this.$set(this.tableSetting, "tableData", []);
          this.$set(this.tableSetting, "totalNumber", 0);
        });
    },
    //打开详情页
    gotoDetails(data) {
      if (data) {
        this.pageType = "edit";
      }
      let form = {
        pageType: this.pageType,
      };
      if (this.pageType != "add") {
        form.id = data.id;
        form.status = data.status;
      }
      let pathUrl = "";
      if (this.menuType == "maintain" || this.ordeType == "maintain") {
        //日常维护工单
        pathUrl = "/orderManagement/normalMaintenance/details";
      } else if (
        this.menuType == "experiment" ||
        this.ordeType == "experiment"
      ) {
        //试验工单
        pathUrl = "/orderManagement/experimentOrder/details";
      } else if (this.menuType == "repair" || this.ordeType == "repair") {
        /* 计划检修 */
        pathUrl = "/orderManagement/planRepair/details";
      }
      let { href } = this.$router.resolve({
        path: pathUrl,
        query: form,
      });
      window.open(href, "_blank");
    },
    //新建
    toAdd() {
      this.pageType = "add";
      this.gotoDetails();
    },
    //获取选中数据
    getRadioData() {
      let data = this.$refs.klTable.getRadioData();
      return data;
    },
  },
};
</script>
<style lang="less" scoped>
.normalMaintenance {
  min-height: 500px;
  height: 100%;
  text-align: center;
}
.constentmain {
  position: relative;
}
.tableContent {
  min-height: 500px;
  height: 100%;
}
.annotations {
  text-align: left;
  height: 20px;
  line-height: 20px;
  position: absolute;
  bottom: 5px;
}
.circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 10px;
}
</style>
